<template>
		<div class=" body">
		
		<!--赛事总览四个标签展示-->
		<div class="competition-overview">
			<div class="total total-goals">
				<img width="44" height="44" src="../assets/all_goals.png" alt="" />
				<div class="total-goals-num">
					<h1 >{{goals}}</h1>
					<span>赛事总进球</span>
				</div>
			</div>
			<div class="total total-average-goals">
					<img width="56" height="46" src="../assets/avgoals.png" alt="" />
					<div class="total-goals-num">
						<h1 >{{average}}</h1>
						<span>场均进球数</span>
					</div>
			</div>
			<div class="total total-yellow-card">
					<img  width="56" height="46" src="../assets/yellowCard.png" alt="" />
					<div class="total-goals-num">
						<h1 >{{yellowCard}}</h1>
						<span>赛事黄牌数</span>
					</div>
				
			</div>
			<div class="total total-red-card">
					<img  width="56" height="46" src="../assets/redCard.png" alt="" />
					<div class="total-goals-num">
						<h1>{{redCard}}</h1>
						<span>赛事红牌数</span>
					</div>
				
			</div>
		</div>
		<!--信息展示-->
		<div class="columns">
			
			<div class="columns-left">
				
				<h3  class="column-heading">近期赛况
				<a @click="changeShowNum"  class="float-right">
					
						<b>{{showNum>=recent.length?'已展示全部>>':'查看更多>>'}}</b>
					
				</a>
				</h3>
				
				<!--近期赛况-->				
				<div class="recent-competition">
					<div class="games-info"  v-for="(i,index) in recent " v-if="index<showNum">
						<h5 class="date-time">{{i.time||'比赛时间'}}</h5>
						<p class="address" >{{i.roundName||'场地名'}}</p>
						<div class="against">
							<div>
								<img width="45" :src="i.redTeamIcon||initImg" alt="" />
								<div class="nowrap">{{i.redTeamName||'主场队伍'}}</div>
							</div>
							<div class="the-score">
								{{i.redScore}} : {{i.blueScore}}
							</div>
							<div>
								<img width="45" :src="i.blueTeamIcon||initImg" alt="" />
								<div class="nowrap">{{i.blueTeamName||'客场队伍'}}</div>
							</div>
						</div>
						<router-link class="geme-moreInfo" :to="'/EventDetails/'+i.scheduleId"><span @click="navGo('TeamPerformance')">查看数据</span></router-link>
					</div>
				</div>
				
				<!--优秀球员-->
				<h3 class="column-heading">优秀球员</h3>
				<div class="good-players">
					
					<div class="players-info" v-for="( p,index) in goodPlayer" v-if="index<3" :key="index">

						<div class="player-introduce">
							<span class=" player-lable"><img src="../assets/playertitle.png" class="player-title"/><span>{{p.honorName||'荣誉称号'}}</span></span>

							<span class="player-number">{{p.cloth||' '}}</span>
						</div>
						<img class="player-photo" :src="p.playerIcon||initImg"/>
						
						<div class="player-competition" @click="goto('PlayerDetails',{id:p.scheduleId,name:p.studentName})">
							<h4 class="player-name">{{p.studentName||'球员姓名'}}</h4>
							<span class="from-school">{{p.teamName||'球队名字'}}</span>
							
							<div class="player-competition-info">
								<h4 class="times-play">{{p.matchCount||'出场次数'}}</h4>
								<span>出场次数</span>
							</div>
							<div class="player-competition-info">
								<h4 class="goal">{{p.clothes||'球衣号码'}}</h4>
								<span>球衣号</span>
							</div>
							<div class="player-competition-info">
								<h4 class="average">{{p.position||'场上站位'}}</h4>
								<span>站位</span>
							</div>
						
						</div>
					</div>
				
				</div>
				<h3 class="column-heading">赛事简介</h3>
				<div class="events-introduce">
					<div>
						<h4>赛事说明</h4>
						<p >{{title||'赛事说明'}}</p>
					</div>
					<div>
						<img width="100%" height="300" :src="img?img:initImg" alt="宣传图"/>
					</div>
				</div>
			</div>

			
			<div class="columns-right">
				<!--积分榜 /学校排名-->
				<h3 class="column-heading">积分榜</h3>
				<div class="rank-info school-rank">
						<div class="rank-info-name" >
							<div class="list-left">
								<span class="cl-black" style="color: white;">排名</span>
								<span style="text-indent: 3em;">球队</span>
							</div>
							<div class="list-right">
								<span>场次</span>
								<span>胜/平/负</span>
								<span>积分</span>
							</div>
							
						</div>
						<li class="rank-info-list" v-for="(item,index) in teamRank" v-if="index<10">
							<div class="list-left">                         
								<span>
									<img v-if="item.rank==1" src="../assets/jinpai.png"/>
									<img v-if="item.rank==2" src="../assets/yinpai.png"/>
									<img v-if="item.rank==3" src="../assets/tongpai.png"/>
									<span v-if="item.rank>3">{{item.rank}}</span>
								</span>
								<span><img width="30" :src="initImg"/>{{item.teamName||'球队名'}}</span>
							</div>
							<div class="list-right">
								<span>{{item.times||0}}场</span>
								<span>{{item.victory||0}}/{{item.draw||0}}/{{item.lose||0}}</span>
								<span>{{item.integral||0}}</span>
							</div>
							
						</li>
						
				</div>
				<!--射手榜 / 射手积分-->
				<h3 class="column-heading">射手榜</h3>
				<div class="rank-info shooter-rank">
					<div class="rank-info-name">			
						<div class="list-left">
							<span class="cl-black" style="color: white;">排名</span>
							<span style="text-indent: 2em;">姓名</span>
						</div>
						<div class="list-right">
							<span>球队</span>
							<span>进球数</span>
						</div>
							
					</div>
					
					<li class="rank-info-list" v-for="(item,index) in playerRank" v-if="index<10">
						<div class="list-left">
							<span>
								<img v-if="item.rank==1" src="../assets/jinpai.png"/>
								<img v-if="item.rank==2" src="../assets/yinpai.png"/>
								<img v-if="item.rank==3" src="../assets/tongpai.png"/>
								<span v-if="item.rank>3">{{item.rank}}</span>
							</span>
							<span><img width="30" :src="item.playerIcon||initImg"/>{{item.studentName||'学生名'}}</span>
						</div>
						<div class="list-right">
							<span>{{item.teamName||'球队名'}}</span>
							<span>{{item.goals}}</span>
						</div>
						
					</li>

					<!--<li class="rank-info-list"><a class="loding-more">更多>></a></li>-->
					
				</div>
			</div>
		</div>
	</div>
	</template>
	<script type="text/javascript">
		export default{
			data(){
				return {
					recent:[],
					showNum:6,//显示最近比赛的场次
					goodPlayer:[],
					teamRank:[],
					playerRank:[],
					goals:0,
					average:0,
					yellowCard:0,
					redCard:0,
					people:'',
					gender:'',
					grad:'',
					img:'',
					title:''					
				}
			},
			methods:{
				changeShowNum(){this.showNum=this.showNum==6?this.recent.length:6},
				getOverviewData(){
					this.$axios.post(
						'http://101.37.33.145:3100/weixin/getLeagueView.do',
						{
							params:{
							leagueId:this.comId
								
							}

						}
	
					).then(res=>{
						console.log('来自EventOverview页面的请求成功了');
						this.recent=res.data.recent;
						this.goodPlayer=res.data.goodPlayer;
						this.teamRank=res.data.teamRank;
						this.playerRank=res.data.playerRank;
						this.goals=res.data.goals;
						this.average=res.data.average.toFixed(2);
						this.yellowCard=res.data.yellow;
						this.redCard=res.data.red;
						this.people=res.data.people;
						this.gender=res.data.gender;
						this.grad=res.data.grad;
						this.img=res.data.img;
						this.title=res.data.title;
						
						
					}).catch(err=>{
						console.log(err,'来自EventOverview页面的请求失败了')
					})
				},
				goto(str,obj){
					this.$router.push({name:str,params:{id:obj.id,name:obj.name} });
					sessionStorage.navActive='RankingList'
				},
				navGo(str){
					sessionStorage.navActive=str;
				},
				
			},
			props:['comId','comTitle','comImage'],
			created:function(){
				this.getOverviewData();
			},
			
			mounted:function(){
				sessionStorage.navActive='EventOverview'

			},
			computed:{
				
			},

			watch:{
				'comId':{
					handler:function(newValue,oldValue){
						this.getOverviewData();
					}
				}
			}
		}
		
	</script>
	<style scoped="scoped">	
		.body{
			padding: 0px;
			margin: 0px auto;
			width: 100%;
			height: auto;
			overflow: hidden;
			font-family: "微软雅黑";
	
		}		
		ul,li,h1,h2,h3,h4,h5,input,span{
			list-style: none;
			padding: 0px;
			margin: 0px;
			border: none;
			outline: none;
		}
		a{
			text-decoration: none;		
			color: inherit;				
		}
		.nowrap{
			white-space: nowrap;
		}
		
		/*赛事总览盒子*/
		.competition-overview{
			width: 100%;
			height: auto;
			overflow: hidden;
		}
		/*总分标签*/
		.total:not(:last-child){
			margin-right: 30px;
		}
		.total{
			box-sizing: border-box;
			position: relative;
			float: left;
			width: calc( (100% - 30px*3) / 4);
			height:100px;
			background-color: #009e86;
		}
		/*总分标签里的分隔符*/
		.total::before{
			content: '';
			position: absolute;
			top: calc(50% - 16px);
			left: 100px;
			width:1px ;
			height:32px;
			background-color:white;
			box-shadow: 1.2px 0px #006A5F;
		}
		.total>img{
			position: absolute;
			top: calc(50% - 21px);
			right:calc((100% - 100px) + 20px  );
			
		}
		.total-goals-num{
			width: calc(100% - 100px);
			margin-left: 100px;
			margin-top: 20px;
			text-align: center;
			color: white;
		}
		
		
		
		
		
		
		/*左分栏 -信息展示区域*/
		.columns-left{
			float: left;
			width: 810px;
			height: auto;
			margin-right: 30px;
			
		}
		/*右分栏 -信息展示区域*/
		.columns-right{
			float: right;
			width: calc(100% - (810px + 30px));
			height: auto;
			overflow: hidden;
		}
		/*分栏标题标签*/
		.column-heading{
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: 42px;
			line-height: 42px;
			margin-bottom: 20px;
			margin-top: 30px;
			overflow: hidden;
			text-indent: 1em;
			font-weight: 400;
			font-size: 16px;
			border-bottom:5px solid #77c2c3;
			border-top-left-radius: 5px;
		}
		.column-heading:before{
			content: "";
			position: absolute;
			z-index:-1;
			top: 0px;
			left: -1em;
			width: 126px;
			height: 42px;
			background-color: #77C2C3;
			border-top-right-radius: 10px;
		}
		.column-heading:after{
			content: '';
			position:absolute ;
			top: 3.5px;
			left: calc(123px - 1em );
			border-left:35px solid  #77C2C3;
			border-top:38px solid transparent;
			/*border-right:34px solid aquamarine;*/
		}
		/*最近比赛信息 盒子 6个*/
		.games-info{
			position: relative;
			float: left;
			box-sizing: border-box;
			width: 250px;
			height: 215px;
			margin-bottom:30px ;
			padding: 0px;
			text-align: center;
			background-color: #f2f2f2;
			border-radius: 3px;
		}
		/*优秀球员信息盒子 6个*/
		.players-info{
			position: relative;
			float: left;
			width: 250px;
			height: 260px;
			margin-bottom:30px ;
			background-color: #F2F2F2;
		
		}
	
		.games-info:not(:nth-of-type(3n) ),.players-info:not(:nth-of-type(3n) ){
			margin-right:30px ;
		}
		.games-info:hover,.players-info:hover{
			box-shadow: 3px 3px 3px 0px gainsboro;
		}
		.geme-moreInfo,.address{
			font-size:14px;
		}
		.date-time{
			width:100%;
			height: 40px;
			line-height:40px ;
		
			background-color: #DCDCDC;
			
		}
		.address{
			margin: 15px;
		}
		/*对战双方*/*/
		.against{
			width: 100%;
			

			overflow: hidden;
			text-align: center;
			
		}
		.against>div{
			
			display: inline-block;
			vertical-align: top;
			line-height: top;
			width: 28%;
			
			height: auto;
			
		}
		.against>.the-score{
			width: 30%;
			margin-top: 10px;
			background-color: #77c2c3;
			color: white;
			font-size:20px ;
			border-radius: 24px;
		}
		.against>div>div{
			margin: 10px 0px;
			font-size:14px ;
		}
		.more-competition{
			float: right;
			margin-top: -55px;
			font-size: 14px;
		}
		
		/*球员头像*/
		.player-photo{
			position: absolute;
			z-index: 3;
			top: 60px;
			left: calc(50% - 30px);
			width: 60px;
			height: 60px;
			border-radius:50% ;
			
		}
		/*球员标签*/
		.player-lable{
			position: relative;
			top: 10px;
			left: -5px;
			display: inline-block;
			width: 80px;
			height: 80px;
			line-height: 75px;
			overflow: hidden;
			text-align: center;
			background: url(../assets/playertitle.png) no-repeat;
			font-size: 12px;
			transform: rotate(180deg);
		}
		.player-title{
			position: absolute;
			z-index: -1;
			left:0px ;
			outline: none;border: none;vertical-align: middle;
		}
		.player-lable>span{
			display: inline-block;
		
			color: red;
			transform: rotate(180deg);
		}
		/*球员介绍*/
		.player-introduce{
			position: relative;
			
			box-sizing: border-box;
			width: 100%;
			height: 95px;
			padding-left: 16px;
			overflow: hidden;
			background-color: #0e4455;
		}
		/*隶属学校,场上司职*/
		.from-school{
			display: block;
			font-size: 14px;
			color: #666666;
			margin: 15px;		
		}
		/*球员编号*/
		.player-number{
			position: absolute;
			top: 6px;
			bottom: 0;
			right: 18px;
			font-size:64px ;
			color:#3E6A7A;

		}
		/*球员赛事概况*/
		.player-competition{
			position: absolute;
			bottom: 0px;
			width: 100%;
			height: 130px;
			overflow: hidden;
			text-align: center;
		}
		/*球员赛事概况详细分栏*/
		.player-competition-info{
			float:left;
			width: 33.3%;
			height: 50px;
		}
		/*球员名字*/
		.player-name{
			font-size: 14px;
			font-weight: 500;
			text-align: center;
		}
		.player-competition-info>h4{
			margin-bottom: 5px;
			color: #104558;
			font-size: 14px;
		}
		.player-competition-info>span{
			
			color: #666666;
			font-size: 14px;
		}
		.events-introduce{

			width: 100%;
		}
		.events-introduce>div{
			box-sizing: border-box;
			float: left;
			width:50% ;
			height: 320px;
			padding: 10px;			
			line-height: 24px;
			font-size: 14px;
			border: 1px solid #DCDCDC;
		}
		
		/*排行积分列表*/
		.rank-info{
			box-sizing: border-box;
			width: 100%;
			height:auto ;
			overflow: hidden;
			border:1px solid #DCDCDC;
		}
		.rank-info-name{
			box-sizing: border-box;
			color: white;
			overflow: hidden;
			font-size: 14px;
			background-color: #4b9ca0;
			border-bottom: 1px solid #dcdcdc;
		}
		.rank-info-name>span,.rank-info-list>span{
			 box-sizing: border-box;
			float: left;
			
		}
		.rank-info-name>span:nth-of-type(2),.rank-info-list>span:nth-of-type(2){
			width: 30%;
			overflow: hidden;
		}
		
		.rank-info>li{
			width: 100%;
			height: 50px;
			border-bottom:1px solid #dcdcdc;
		}
		.rank-info-list:nth-of-type(2n){
			background-color: #F2F2F2;
		}
		.rank-info-list{
			float: left;
			font-size: 14px;
		}
		.list-left,.list-right{
			width: 50%;
			float: left;
			text-align: center;
			margin: 3% 0px;
			
		}
		.rank-info-list .list-left,.rank-info-list .list-right{
			margin: 4% 0px;
			
		}
		.list-left img{
			vertical-align: middle;
			float:left;
			margin:0px 3%;
			width: 20%;
		}
		.list-left>span:nth-of-type(1)>img{
			width: 60%;
			margin-left: 20%;
		}
		.list-left>span:nth-of-type(1){
			color: #009999;
		}
		.list-left>span{
			float: left;
			width: 25%;
			text-align: center;

		}
		.list-left>span:nth-child(2){
			
			width: 70%;
			text-align: left;
		}
		.school-rank .list-right>span{
			float: left;
			width: 33%;
		}
		.shooter-rank .list-right>span{
			float: left;
			width: 50%;
		}
		.loding-more{
			margin-left: 10px;
			line-height: 50px;
			
		}
		.float-right{
			float: right;
		}
		
	</style>